@extends('admin.public.master')
@section('content')
    <div class="content-wrapper">
        <div class="content-wrapper-before"></div>
        <div class="content-header row">
            <div class="content-header-left col-md-1 col-4 mb-2">
                <a href="{{route('goods.goods.index')}}"><h5 class="content-header-title">商品列表</h5></a>
            </div>
            <div class="content-header-left col-md-1 col-4 mb-2">
                <a href="{{route('goods.goods.create')}}"><h5 class="content-header-title">添加商品</h5></a>
            </div>
            <div class="content-header-left col-md-1 col-4 mb-2">
                <a href="javascript:;"><h5 class="content-header-title">编辑商品</h5></a>
            </div>
        </div>
    </div>
    <div class="content-body">
        <div class="card mt-2">
            <form action="{{route('goods.goods.update',$good)}}" method="post">
                @csrf @method('PUT')
                <div class="row ml-2 mt-2">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">商品名称</label>
                            <input type="text" name="name" value="{{$good->name}}" class="form-control" placeholder=""
                                   aria-describedby="helpId">
                        </div>
                    </div>
                </div>
                <div class="row ml-2 mt-1">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">商品介绍</label>
                            <input type="text" name="brief" value="{{$good->brief}}" class="form-control" placeholder=""
                                   aria-describedby="helpId">
                        </div>
                    </div>
                </div>
                <div class="row ml-2 mt-1">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">商品价格</label>
                            <input type="text" name="price" value="{{$good->price}}" class="form-control" placeholder=""
                                   aria-describedby="helpId">
                        </div>
                    </div>
                </div>
                <div class="row ml-2 mt-1">
                    <div class="col-6">
                        <label for="">选择分类</label>
                    </div>
                </div>
                <div class="row ml-2 mt-1">
                    <div class="col-2">
                        <select name="classify_id[]" class="form-control" id="firstLeve">
                            <option value="">一级分类</option>
                            @foreach($classifyfirst as $item)
                                <option {{$item['id']==$clssifyIds[0]?'selected':''}} value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-2">
                        <select name="classify_id[]" class="form-control" id="secondLevel">
                            <option>二级分类</option>
                            @foreach($classifysecond as $item)
                                <option
                                    {{$item['id']==$clssifyIds[1]?'selected':''}} value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-2">
                        <select name="classify_id[]" class="form-control" id="thirdlyLevel">
                            <option>三级分类</option>
                            @foreach($classifythird as $item)
                                <option
                                    {{$item['id']==$clssifyIds[2]?'selected':''}} value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div id="attribute" class="row ml-2 mt-2">
                    <label class="form-check-label" for="">选择属性:</label>
                    <div class="col-6" id="AttrBox">
                        @foreach($attrIds as $attr)
                            <div class="form-check form-check-inline">
                                <input {{in_array($attr['id'],$attrId)?'checked':''}} name="attribute[]" class="form-check-input" type="checkbox" id="{{$attr['id']}}" value="{{$attr['id']}}">
                                <label class="form-check-label" for="{{$attr['id']}}">{{$attr['name']}}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div id="attribute" class="row ml-2 mt-2">
                    <label class="form-check-label" for="">设为热门:</label>
                    <div class="col-6">
                        <div class="form-check form-check-inline">
                            <input name="is_hot" class="form-check-input" type="checkbox" id="hot"
                                   value="0" {{$good->is_hot==1?'checked':''}}>
                            <label class="form-check-label" for="hot"></label>
                        </div>
                    </div>
                </div>
                <div id="attribute" class="row ml-2 mt-2">
                    <label class="form-check-label" for="">商品图片:</label>
                    <div class="col-12">
                        <div class="form-check form-check-inline">
                            <button id="test1" type="button" class="btn btn-glow btn-bg-gradient-x-red-pink mt-1 ml-5">
                                上传图片
                            </button>
                        </div>
                    </div>
                </div>
                <div id="attribute" class="row ml-2 mt-2">
                    <label class="form-check-label" for="">商品图片预览:</label>
                    <div id="box" class="col-12">
                        @foreach($good->pictures as $picture)
                            <img src="{{$picture}}" alt="">
                            <input type="hidden" name="pictures[]" value="{{$picture}}">
                        @endforeach
                    </div>
                </div>
                <div id="attribute" class="row ml-2 mt-2">
                    <label class="form-check-label" for="">商品描述:</label>
                    <div class="col-12">
                        <div class="form-check form-check-inline ml-3 mt-3">
                            <script id="container" name="details" type="text/plain">
                            {!!$good->details  !!}
                            </script>
                            <!-- 配置文件 -->
                            <script type="text/javascript" src="{{asset('shop/ueditor/ueditor.config.js')}}"></script>
                            <!-- 编辑器源码文件 -->
                            <script type="text/javascript" src="{{asset('shop/ueditor/ueditor.all.js')}}"></script>
                            <!-- 实例化编辑器 -->
                            <script type="text/javascript">
                                var ue = UE.getEditor('container',{
                                    initialFrameHeight:500 // 设置编辑器高度
                                });
                            </script>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <button type="submit" class="btn btn-glow btn-bg-gradient-x-red-pink mt-1 ml-5 mb-2">保存商品</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('js')
    <script>
        var editor = new Simditor({
            textarea: $('#editor'),
        });
    </script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '{{route('util.upload.upload')}}'
                , accept: 'images'
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#icon').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    if (res.code == 0) {
                        console.log(res.data.src);
                        $('<img  class="mr-2 mt-2" style="width: 200px;height: 200px;" src="' + res.data.src + '" /><input type="hidden" name="pictures[]" value="' + res.data.src + '">').appendTo('#box');
                        $('#saveIcon').submit()
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
    {{--控制分类选择--}}
    <script>
        //当一级菜单发生变化时给二级菜单重新赋值
        $('#firstLeve').change(function () {
            $('#secondLevel').html('<option value="">二级分类</option>');
            $('#thirdlyLevel').html('<option value="">三级分类</option>');
            var id = $(this).val();
            $.ajax({
                url: '/classify/classify/classifySon/' + id,
                method: 'post',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    });
                    $('#secondLevel').append(html);
                }
            })
        });
        //当二级菜单发生变化时给三级菜单重新赋值
        $('#secondLevel').change(function () {
            $('#thirdlyLevel').html('<option value="">三级分类</option>');
            var id = $(this).val();
            // console.log(id);
            $.ajax({
                url: '/classify/classify/classifySon/' + id,
                method: 'post',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    });
                    $('#thirdlyLevel').append(html);
                }
            })
        });
        //当三级菜单发生变化时现实对应属性
        $('#thirdlyLevel').change(function () {
            var id = $(this).val();
            $.ajax({
                url: '/attribute/attribute/attributeSon/' + id,
                method: 'post',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<div class="form-check form-check-inline">\n' +
                            '                                <input name="attribute[]" class="form-check-input" type="checkbox" id="' + v.id + '" value="' + v.id + '">\n' +
                            '                                <label class="form-check-label" for="' + v.id + '">' + v.name + '</label>\n' +
                            '                            </div>';
                    });
                    $('#AttrBox').html(html);

                }
            })
        });
    </script>
@endpush
